<template>
  <div class="address-detail" v-bind:style="{'height':clientHeight + 'px'}">
    <div class="address-name"><span>投放地址</span> <input type="text" placeholder="请输入地址" v-model="place"></div>
    <div class="address-msg"><span>位置信息描述</span> <textarea placeholder="输入描述信息，例如：二楼设备专用" v-model="placeDes"></textarea></div>
    <div class="default">
      <span>设为默认</span>
      <div @click="changeSwitch" class="switch"  v-bind:class="[{'switch-false' : switchState}]">
        <div class="switch-button" v-bind:class="[{'switch-button-false' : switchState}]">
        </div>
      </div>
    </div>
    <div class="input-button blue" @click="ensure">确 定</div>
    <router-link id="register" to="/address/add">  <div class="input-button white" >取 消</div></router-link>
  </div>
</template>

<script>
import { Toast } from 'vue-ydui/dist/lib.rem/dialog'
import { VXPLACEADD, VXPLACEDEFAULT } from '../../api/request'
export default {
  data: function () {
    return {
      switchState: true,
      clientHeight: document.documentElement.clientHeight,
      place: '',
      placeDes: '',
      isDefault: '0',
      placeSet: '',
      placeDesSet: ''
    }
  },
  created () {
    if (this.getStatus(this.$route.path) === 'addadress') {

    } else if (this.getStatus(this.$route.path) === 'edtadress') {
      this.placeSet = this.$route.query.place
      this.placeDesSet = this.$route.query.placeDes
      this.place = this.$route.query.place
      this.placeDes = this.$route.query.placeDes
      this.isDefault = this.$route.query.isDefault || '0'
      this.placeCode = this.$route.query.placeCode
      console.log(this.isDefault)
      if (this.isDefault === 1) {
        this.switchState = !this.switchState
        this.isDefault = '1'
      }
    }
  },
  methods: {
    getStatus (urlStr) {
      var urlStrArr = urlStr.split('/')
      return urlStrArr[urlStrArr.length - 1]
    },
    changeSwitch: function () {
      this.switchState = !this.switchState
      this.isDefault = this.switchState ? 0 : 1
    },
    ensure: function () {
      if (this.place === '' || this.placeDes === '') {
        Toast({mes: '地址与描述不能为空', timeout: 1000})
      } else {
        if (this.getStatus(this.$route.path) === 'addadress') {
          VXPLACEADD(this.$store.getters.uid, this.place, this.placeDes, this.isDefault).then(
            res => {
              if (res.data.code === 200) {
                Toast({mes: '添加地址成功', timeout: 1000})
                this.$router.go(-1)
              } else {
                Toast({mes: res.data.msg, timeout: 1000})
              }
            },
            error => {
              console.log(error)
            })
        } else if (this.getStatus(this.$route.path) === 'edtadress') {
          VXPLACEDEFAULT(this.$store.getters.uid, this.placeCode, this.place, this.placeDes, this.isDefault).then(
            res => {
              console.log(res.data)
              if (res.data.code === 200) {
                Toast({mes: '修改地址成功', timeout: 1000})
                this.$router.go(-1)
              } else {
                console.log(res.data.code)
                Toast({mes: res.data.msg, timeout: 1000})
              }
            },
            error => {
              console.log(error)
            })
        }
      }
    }
  },
  watch: {
    $route: function (to, from) {
      if (this.getStatus(this.$route.path) === 'addadress') {

      } else if (this.getStatus(this.$route.path) === 'edtadress') {
        this.place = this.$route.query.place
        this.placeDes = this.$route.query.placeDes
        this.isDefault = this.$route.query.isDefault
        this.placeCode = this.$route.query.placeCode
      }
    }
  }
}
</script>

<style scoped>
  .address-detail{
    position: relative;
    background-color: #ebebeb;
    padding-top: 0.2rem;
  }
  .address-name{
    height: 0.92rem;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
    line-height: 0.92rem;
    font-size: 0.3rem;
    padding-left: 0.45rem;
    padding-right: 0.33rem;
  }
  .address-name input {
    float: right;
    width: 4.26rem;
    height: 0.9rem;
    text-align: left;
    line-height: 0.9rem;
    color: #a09f9f;
    font-size: 0.3rem;
  }
  .address-msg{
    width: 100%;
    height: 2.2rem;
    padding-left: 0.45rem;
    padding-right: 0.33rem;
    padding-top: 0.4rem;
    background-color: #fff;
    vertical-align: top;
    border-bottom: 1px solid #ebebeb;
  }
  .address-msg textarea{
    height: 1.7rem;
    width: 4.26rem;
    float: right;
    text-align: left;
    line-height: 0.46rem;
    color: #a09f9f;
    resize: none;
    font-size: 0.3rem;
  }
  .default {
    height: 0.92rem;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
    line-height: 0.92rem;
    font-size: 0.3rem;
    padding-left: 0.45rem;
    padding-right: 0.33rem;
  }
  .address-detail span{
    font-size: 0.36rem;
    color: #514f4f;
    line-height: 0.9;
  }
  .address-msg span{
    margin-top: 0.3rem;
    vertical-align: top;
  }
  .switch {
    width: 0.95rem;
    height: 0.48rem;
    border-radius: 0.24rem;
    background-color: #38adff;
    float: right;
    margin-top: 0.2rem;
    position: relative;
    transition:background-color 0.5s;
  }
  .switch-false{
    background-color: #dddddd;
  }
  .switch-button{
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    left: 0.5rem;
    top:0.04rem;
    background-color: #fff;
    transition:left 0.5s;
  }
  .switch-button-false {
    background-color: #fff;
    left: 0.06rem;
  }
  .white{
    position: absolute;
    left: calc(50% - 3.25rem);
    bottom: 0.42rem;
    background-color: #fff;
    color: #0092f8;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem
  }
  .blue{
    position: absolute;
    left: calc(50% - 3.25rem);
    bottom: 1.52rem;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    background-color: #0092f8;
  }
</style>
